<template>
  <div class="relative w-full h-full">
    <div class="absolute top-0 left-0 w-full h-139 z-1">
      <base-bg-card :img="bg">
        <div class="flex text-28 w-full absolute top-40 justify-between">
          <div class="absolute flex gap-x-40 left-50">
            <template v-for="(item, index) in outreach1" :key="index">
              <base-bg-card
                class="outreach outreachd"
                :img="outPath == item.path ? menuImgAc : menuImg"
              >
                <div
                  class="flex justify-between items-center h-full"
                  :class="[outPath == item.path ? 'menu-text-active' : 'menu-text']"
                >
                  {{ item.name }}
                </div>
              </base-bg-card>
            </template>
          </div>
          <div class="absolute flex gap-x-40 right-235">
            <template v-for="(item, index) in outreach2" :key="index">
              <base-bg-card
                :class="['outreach', item.name === '第三方施工' ? 'outreachc' : 'outreachd']"
                :img="outPath === item.path ? item.bgAc : item.bg"
              >
                <div
                  class="flex justify-between items-center h-full"
                  :class="[outPath == item.path ? 'menu-text-active' : 'menu-text']"
                >
                  {{ item.name }}
                </div>
              </base-bg-card>
            </template>
          </div>
        </div>
      </base-bg-card>
    </div>

    <!--<img :src="bg" alt="" class="absolute top-0 left-0 w-full h-139 z-1" />-->
    <img :src="Frame" alt="" class="absolute top-21 left-0 w-29 h-1071 z-10" />
    <img :src="Frame" alt="" class="absolute top-21 right-3 w-29 h-1071 z-10 scale-x-[-1]" />
    <img :src="FrameB" alt="" class="absolute right-0 left-0 m-x-a w-full h-40 bottom-10 z-10" />
    <!--底部-->
    <div class="absolute right-0 left-0 m-x-a w-600 h-46 bottom-60 z-999 flex">
      <template v-for="(item, index) in menu" :key="index">
        <base-bg-card
          class="t-menu"
          :img="currentPath == item.path ? menuImgAc : menuImg"
          @click="mencClick(item)"
        >
          <div
            class="flex justify-between items-center h-full"
            :class="[currentPath == item.path ? 'menu-text-active' : 'menu-text']"
          >
            {{ item.name }}
          </div>
        </base-bg-card>
      </template>
    </div>
    <!--地图-->
    <div class="absolute w-1613 h-859 right-0 left-0 m-x-a top-140 bg-blue">
      <s-map></s-map>
    </div>
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>
<script setup>
import bg from '@/assets/img/F026D6DA123CCDFDFFFB6F7D81C976A8.png'
import Frame from '@/assets/img/Frame_427319949.png'
import FrameB from '@/assets/img/9DCFAE0DCDEE6D84E7A53E5FE857CB6B.png'
import BaseBgCard from '@/components/card/BaseBgCard.vue'
import menuImg from '@/assets/img/menu_1_1.png'
import menuImgAc from '@/assets/img/menu_1_2.png'
import youce from '@/assets/img/images/右侧按钮.png'
import youceh from '@/assets/img/images/右侧按钮-h.png'
import youcec from '@/assets/img/images/右侧按钮-长.png'
import youcech from '@/assets/img/images/右侧按钮-长-h.png'

import SMap from '@/components/map/SMap.vue'
import { useRoute, useRouter } from 'vue-router'
import { computed, ref } from 'vue'

const router = useRouter()
const route = useRoute()

const menu = [
  {
    name: '管线总览',
    path: '/PipelineOverview',
  },
  {
    name: '交互影响',
    path: '/InteractionEffect',
  },
  {
    name: '综合管理',
    path: '/IntegratedManagement',
  },
]
const mencClick = (item) => {
  console.log(item)
  router.push(item.path)
}
console.log(route)
const currentPath = computed(() => {
  return route.path
})

var outPath = 'dixiaguanxian'
const outreach1 = [
  {
    name: '综合监管',
    path: '',
    bg: menuImg,
    bgAc: menuImgAc,
  },
  {
    name: '燃气安全',
    path: '',
    bg: menuImg,
    bgAc: menuImgAc,
  },
  {
    name: '供水保障',
    path: '',
    bg: menuImg,
    bgAc: menuImgAc,
  },
  {
    name: '排水监管',
    path: '',
    bg: menuImg,
    bgAc: menuImgAc,
  },
  {
    name: '道路安全',
    path: '',
    bg: menuImg,
    bgAc: menuImgAc,
  },
]
const outreach2 = [
  {
    name: '桥梁安全',
    path: '',
    bg: youce,
    bgAc: youceh,
  },
  {
    name: '第三方施工',
    path: '',
    bg: youcec,
    bgAc: youcech,
  },
  {
    name: '地下管线',
    path: 'dixiaguanxian',
    bg: youce,
    bgAc: youceh,
  },
  {
    name: '山体安全',
    path: '',
    bg: youce,
    bgAc: youceh,
  },
]
</script>

<style scoped>
.t-menu {
  width: 172.5px;
  height: 46px;
  font-size: 22px;
  font-family: 'AliSemiBold';
  line-height: 26px;
  letter-spacing: 4px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.outreach {
  height: 47px;
  font-size: 28px;
  font-family: 'AliSemiBold';
  line-height: 30px;
  letter-spacing: 4px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8dddee;
}

.outreachc {
  width: 215px;
}

.outreachd {
  width: 172.5px;
}

.menu-text {
  background: linear-gradient(180deg, #ffffff 0%, #77baff 100%);
  -webkit-background-clip: text; /* 将背景剪裁至文本 */
  -webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
}

.menu-text-active {
  color: white;
}
</style>
